<template>
  <div class="video-container" >
    <div class="video" v-loading="isLoading">

  <div class="video-single" v-for="item in sortList" :key="item.id">
    <img class="video-img" :src="item.cover[0]"/>
    <div class="text-video">
      <a class="video-text" href="http://baidu.com">{{item.title}}</a>
    </div>
    <img class="play-video" src="./images/release_play@3x.fb313c4d.png"/>
    <div class="video-class">视频课</div>
    <div class="price-look">
      <div class="price">￥<span>{{item.commodityBackup.price}}</span></div>
      <div class="look">{{item.statisticsBackup.viewCount}}人浏览</div>
    </div>
    <div class="vip-free">
      <button>会员免费</button>
    </div>
    <div class="comment">
      <div class="icon-point">
        <ele-Pointer style="width: 16px;height: 16px">
        </ele-Pointer>
        <span class="num">{{item.statisticsBackup.praiseCount}}</span>
        <ele-ChatDotSquare style="width: 16px;height: 16px">
        </ele-ChatDotSquare>
        <span class="num">{{item.statisticsBackup.commentCount}}</span>
        <ele-Star style="width: 16px;height: 16px">
        </ele-Star>
        <span class="num">{{item.statisticsBackup.favoriteCount}}</span>
      </div>
    </div>
    <div class="user">
      <div class="avatar">
        <img class="user-img" :src="item.creatorBackup.avatar">
        <div class="user-name">{{item.creatorBackup.name}}</div>
        <div>
          <img class="vip-icon" src="./images/authenticate_personal@3x.png">
        </div>
      </div>
      <div class="time">
        <div>{{getFullTime("YY-MM-DD",item.vipTag.createTime)}}</div>
      </div>
    </div>
  </div>


    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"Video",
})
</script>

<script lang="ts" setup>
import getFullTime from "@/utils/getFullTime"
import {useLiveStore} from "@/store/modules/live";
import {storeToRefs} from "pinia";
const LiveStore = useLiveStore()
const {sortList} = storeToRefs(LiveStore)
</script>

<style lang="scss">
.video-container{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7f9;
  min-width: 1200px;
  height: 100%;
  .video{
    border-radius: 4px;
    background: #f5f7f9;
    margin: 0 0px 10px 0px;
    width: 1200px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .video-single{
      position: relative;
      width: 224px;
      height: 280px;
      background-color: #fff;
      border-radius: 4px;
      margin-bottom: 20px;
      margin-right: 20px;
      &:nth-child(5n) {
        margin-right: 0px;
      }
      .text-video{
        height: 40px;
      }
      .video-img{
        width:224px;
        height:125px;
        border-radius: 4px;
        box-sizing: border-box;
      }
      .play-video{
        position: absolute;
        left: 8px;
        top:90px;
        width: 30px;
        height:30px
      }
      .video-class{
        position: absolute;
        top:91px;
        right: 15px;
        width: 40px;
        padding: 5px 10px;
        border-radius: 12px;
        color:#fff;
        font-size:12px;
        background:rgba(0,0,0,.6);
      }
      .video-text{
        display: inline;
        width: 180px;
        word-break: break-all;
        text-align: center;
        font-size:14px;
        color:#111 ;
        box-sizing: border-box;
        margin-left: 5px;
      }

      .price-look{
        margin-left: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width:204px ;
        .look{
          font-size:12px;
          color:#b1b5c1;
        }
        .price{
          color:#f93684;
          height: 18px;
        }
      }
      .vip-free{
        margin-left: 5px;
        button{
          color: #f5f7f9;
          font-size:10px;
          border-radius: 4px;
          background-color:#ff4f87;
          border: none;
        }
      }
      .comment{
        border-bottom: 1px solid #ebeced;
        padding-bottom: 5px;
        .icon-point{
          margin-left: 5px;
          .up{
            width: 14px;
            height: 14px;
            line-height: 16px;
          }
          .num{
            padding-left: 5px;
            margin-right: 10px;
            color:#b1b5c1;
            font-size:12px;
            line-height: 12px;
          }
        }
      }
      .user{
        height: 40px;
        display: flex;
        justify-content: space-between;
        margin-left: 10px;
        .avatar{
          line-height: 40px;
          display: flex;
          .user-img{
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-top: 8px;
          }
          .user-name{
            width: 60px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #111;
            font-size:12px;
            margin-left: 5px;
            height: 40px;
          }
          .vip-icon{
            width: 12px;
            height: 12px;
            margin-left: 5px;
          }
        }
        .time{
          color:#b1b5c1;
          line-height: 40px;
          font-size:12px;
          padding-right:8px
        }
      }
    }
  }
}

</style>
